{% extends "scrum/base.html" %}

{%load static%}

    

    <!-- 内容 -->

    {% block content %}

    


    <div class="row g-5">
      <!-- <div class="col-md-5 col-lg-4 order-md-last">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-primary">进行中的任务</span>
        </h4>
        <ul class="list-group mb-3">
          <li class="list-group-item d-flex justify-content-between  bg-light" id="product_type_5">
            <div>
              <h6 class="my-0">行 政</h6>
              <small class="text-muted">日常行政管理事项</small>
            </div>
            <span class="text-muted">{{tasks_in_progress_list.5.tasks_in_progress_count}}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-sm" id="product_type_2">
            <div>
              <h6 class="my-0">生 产</h6>
              <small class="text-muted">正在进行生产的产品</small>
            </div>
            <span class="text-muted">{{tasks_in_progress_list.2.tasks_in_progress_count}}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-sm" id="product_type_3">
            <div>
              <h6 class="my-0">采 购</h6>
              <small class="text-muted">完成公司日常采购任务</small>
            </div>
            <span class="text-muted">{{tasks_in_progress_list.3.tasks_in_progress_count}}</span>
          </li>

          <li class="list-group-item d-flex justify-content-between lh-sm" id="product_type_4">
            <div>
              <h6 class="my-0">科技服务</h6>
              <small class="text-muted">科技直通车、职业经理人等</small>
            </div>
            <span class="text-muted">{{tasks_in_progress_list.4.tasks_in_progress_count}}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between  bg-light" id="product_type_1">
            <div>
              <h6 class="my-0">研 发</h6>
              <small class="text-muted">公司研发部门</small>
            </div>
            <span class="text-muted">{{tasks_in_progress_list.1.tasks_in_progress_count}}</span>
          </li>
        </ul>

      </div> -->



      <div class="col-md-7 col-lg-8">
        <h4 class="mb-3">正在进行中的<span style="color: red;">{{product_type_detail.product_type}}</span>项目</h4>


        <!--  -->


        <div class="btn-group" role="group"  style="margin-bottom: 10px;">

          {% for product_type in tasks_in_progress_list.values %}

          <button type="button" class="btn btn-outline-primary" id="product_type_{{product_type.id}}" onclick="click_product_type({{product_type.id}})">{{product_type.product_type}} {{product_type.tasks_in_progress_count}}</button>
          
          {% endfor %}

        </div>

        <!--  -->


        <p> 注：
          <span style="color: red;">颜色</span>表示任务过期
          |
          <span style="color: #ff6347;">颜色</span>表示项目距离完成不到24小时
          |
          <span style="color: green;">颜色</span>表示项目距离交付不到3天
        </p>

          

        <table class="table table-hover text-nowrap align-middle">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">项目</th>
              <th scope="col">项目代码</th>
              <th scope="col">负责人</th>
              <th scope="col">分项情况</th>
              <th scope="col">正在进行中的分项</th>
              <th scope="col">预计完结时间</th>
            </tr>
          </thead>
          <tbody>
            {% for product in get_product_by_type%}

              {% if product.status == 0 %}

              <tr onclick="showProductBacklogs({{product.id}})"  title="{{product.goal}}" style="color: red;">

              {% elif product.status == 1 %}

              <tr onclick="showProductBacklogs({{product.id}})"  title="{{product.goal}}" style="color: #ff6347;">

              {% elif product.status == 3 %}
              
              <tr onclick="showProductBacklogs({{product.id}})"  title="{{product.goal}}" style="color: green;">

              {% else %}
              
              <tr onclick="showProductBacklogs({{product.id}})"  title="{{product.goal}}">

              {% endif %}
              <th scope="row">{{product.id}}</th>
              <td>{{product.product}}</td>
              <td>{{product.product_code}}</td>
              <td>{{product.master}}</td>
              <!-- <td>{{product.product_backlog_count}}</td> -->
              <td>{{product.product_backlog_count_success_count}}/{{product.product_backlog_count}}</td>
              <td>{{product.product_backlog_count_in_progress|join:"|"}}</td>
              <td>{{product.end_date}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>






    {% endblock %}

{% block script %}

    

  <style>
    #product_type_{{product_type_id}} h6 {

      color: green;
    }
  </style>

  <script type="text/javascript">


    function showProductBacklogs(product_id){

      // console.log(product_id)

      window.location.href="../product_backlogs?product_id=" + product_id
      
    }

    function click_product_type(product_type_id){

      var href = "?product_type_id=" + product_type_id

      window.location.href= href

    }

    function getQueryVariable(variable){

       var query = window.location.search.substring(1);

       var vars = query.split("&");

       for (var i=0;i<vars.length;i++) {

               var pair = vars[i].split("=");

               if(pair[0] == variable){return pair[1];}

       }

       return(false);

    }

    var product_type_id = getQueryVariable("product_type_id")

    console.log(product_type_id)

    if (product_type_id == false){
      product_type_id = 1
    }

    $("#product_type_{{product_type_id}}").css("background-color", "blue").css("color", "white")




</script>

{% endblock %}